/**
 * 地图
 * WIDTH_MAX:地图最大宽度
 * WIDTH_MIN:地图最小宽度
 * HEIGHT_MAX:地图最大高度
 * HEIGHT_MIN:地图最小高度
 * @constructor
 */
function Map() {
    this.WIDTH_MAX = 700;
    this.WIDTH_MIN = 0;
    this.HEIGHT_MAX = 500;
    this.HEIGHT_MIN = 0;
}

let map = new Map();

/**
 * 蛇
 * id:
 * body:蛇身
 * bodyAll:蛇身数组
 * @constructor
 */
function Snake() {
    this.id = $('.snake');
    this.body = $('.snake li');
    this.bodyAll = [];
}

let snake = new Snake();

/**
 *  食物
 *  id:
 *  x:x坐标
 *  y:y坐标
 *  eaten:是否被吃
 *  count:被吃次数
 * @constructor
 */
function Food() {
    this.id = $('.food');
    this.x = null;
    this.y = null;
    this.eaten = false;
    this.count = 0;
}

let food = new Food();

let direction = "RIGHT"; //  用来蛇存储方向

snakeFood();    //  出现食物
//  启动计时器
let snakeStart = setInterval(function () {
    //  时刻检测蛇头的位置
    let snakeTop = parseInt(snake['body'].eq(0).css('top'));
    let snakeLeft = parseInt(snake['body'].eq(0).css('left'));


    //  判断是否吃到食物
    if (snakeTop === food['y'] && snakeLeft === food['x']) {
        console.log('你吃到了食物！');
        food.count++;
        food['eaten'] = true;
        snake['id'].append(`<li></li>`);    //  蛇身加长1
        snakeFood();
    }

    //  判断蛇是否吃到自己
    for (let i = 1; i < snake['bodyAll'].length; i++) {
        if (snake['bodyAll'][0].top === snake['bodyAll'][i].top && snake['bodyAll'][0].left === snake['bodyAll'][i].left) {
            clearInterval(snakeStart);
            alert('结束！');
            direction = null;
            $('.end').css('display', 'block');
            $('.end p').text(food.count);
            return;
        }
    }

    snakeMove();    //  移动蛇
    // esoterica(snakeTop, snakeLeft);
}, 100);

//  移动蛇
function snakeMove() {
    /**
     * 思路：
     *  1.判断蛇是否吃到食物，吃到就重新调用('.snake li');
     *  2.先循环出蛇身，在把每个蛇身的top和left都存进数组里。然后第一个蛇身先走，后面的蛇身跟着数组里上一个的蛇身top和left，就可以实现移动
     *  3.
     */
    //1
    if (food['eaten'] === true) {
        snake['body'] = $('.snake li');
        food['eaten'] = false;
    }

    //2
    snake['body'].each(function (i) {
        snake['bodyAll'][i] = {top: snake['body'].eq(i).css('top'), left: snake['body'].eq(i).css('left')};
        if (i === 0) {
            if (direction === 'UP') {
                snake['body'].eq(i).css('top', '-=20px');
            } else if (direction === 'DOWN') {
                snake['body'].eq(i).css('top', '+=20px');
            } else if (direction === 'LEFT') {
                snake['body'].eq(i).css('left', '-=20px');
            } else if (direction === 'RIGHT') {
                snake['body'].eq(i).css('left', '+=20px');
            }
        } else {
            snake['body'].eq(i).css({top: snake['bodyAll'][i - 1].top, left: snake['bodyAll'][i - 1].left});
        }
    });
    // 3
    if (parseInt(snake['body'].eq(0).css('left')) >= map.WIDTH_MAX) {
        snake['body'].eq(0).css('left', map.WIDTH_MIN + 'px');
    } else if (parseInt(snake['body'].eq(0).css('left')) < map.WIDTH_MIN) {
        snake['body'].eq(0).css('left', map.WIDTH_MAX - 20 + 'px');
    } else if (parseInt(snake['body'].eq(0).css('top')) >= map.HEIGHT_MAX) {
        snake['body'].eq(0).css('top', map.HEIGHT_MIN + 'px');
    } else if (parseInt(snake['body'].eq(0).css('top')) < map.HEIGHT_MIN) {
        snake['body'].eq(0).css('top', map.HEIGHT_MAX - 20 + 'px');
    }
}

//  随机出现食物
function snakeFood() {
    /**
     * 思路：
     *  1.首先让食物隐藏
     *  2.随机循环出食物的坐标
     *      2.1.随机出不大于地图的坐标，并且坐标是能被20整除的
     *      2.2.判断坐标是否正好是蛇身的坐标，如果是就重新随机
     *  3.显示食物
     */
    food['id'].css('display', 'none');

    let foodTop;
    let foodLeft;
    let a = true;
    while (true) {
        foodLeft = parseInt(Math.random() * map.WIDTH_MAX);
        foodTop = parseInt(Math.random() * map.HEIGHT_MAX);
        if (foodLeft % 20 === 0 && foodTop % 20 === 0) {
            for (let i = 0; i < snake['bodyAll'].length; i++) {
                if (foodLeft === parseInt(snake['bodyAll'][i].left) && foodTop === parseInt(snake['bodyAll'][i].top)) {
                    console.log('食物随机出现错误。。。。。正在重新随机！');
                    a = false;
                    break;
                }
                a = true;
            }
            if (a === true) {
                console.log('食物随机出现正常！');
                break;
            }
        }
    }
    food['x'] = foodLeft;
    food['y'] = foodTop;
    food['id'].css({
        left: food['x'] + 'px',
        top: food['y'] + 'px',
        display: 'block'
    });

}

//  开始游戏
$('.start').click(function () {
    $('.start').css('display', 'none');
    //  监听键盘事件
    $(window).keydown(function (event) {
        switch (event.keyCode) {
            case 38:
                // console.log('上');
                if (direction !== 'DOWN') {
                    direction = 'UP';
                }
                break;
            case 40:
                // console.log('下');
                if (direction !== 'UP') {
                    direction = 'DOWN';
                }
                break;
            case 37:
                // console.log('左');
                if (direction !== 'RIGHT') {
                    direction = 'LEFT';
                }
                break;
            case 39:
                // console.log('右');
                if (direction !== 'LEFT') {
                    direction = 'RIGHT';
                }
                break;
        }
    });
});

//  结束游戏
function EndGame() {
    location.reload()
}


//  秘技：上上下下左右左右baba
// function esoterica(snakeTop, snakeLeft) {
//     if (food['eaten'] === true) {
//         snake['body'] = $('.snake li');
//         food['eaten'] = false;
//     }
//     snake['body'].each(function (i) {
//         snake['bodyAll'][i] = {
//             left: parseInt(snake['body'].eq(i).css('left')),
//             top: parseInt(snake['body'].eq(i).css('top'))
//         };
//         if (i === 0) {
//             if (food.y > snakeTop) {
//                 snake['body'].eq(0).css('top', '+=20px');
//             } else if (food.y < snakeTop) {
//                 snake['body'].eq(0).css('top', '-=20px');
//             } else if (food.x > snakeLeft) {
//                 snake['body'].eq(0).css('left', '+=20px');
//             } else if (food.x < snakeLeft) {
//                 snake['body'].eq(0).css('left', '-=20px');
//             }
//         } else {
//             snake['body'].eq(i).css({
//                 top: snake['bodyAll'][i - 1].top + 'px',
//                 left: snake['bodyAll'][i - 1].left + 'px'
//             });
//         }
//     });
//
//     // console.log('当前食物地址在' + foodTop + ':' + foodLeft + ',蛇头在' + snakeTop + ':' + snakeLeft);
// }